<template>
  <div class="box">
    <ul class="nav">
      <li :class="{'active':currentEle=='综合'}" @click="clickLi">综合</li>
      <li :class="{'active':currentEle=='销量'}" @click="clickLi">销量</li>
      <li :class="{'active':currentEle=='价格'}" @click="clickLi">
        价格
        <span>
          <img
            v-if="istap1" @click="tapImg1(1)"
            src="https://wp.sharkshopping.com/static/img/arrow-up.png"
            alt
            
          />
          <img v-else src="https://wp.sharkshopping.com/static/img/arrow-up2.png" alt />
          <img
            v-if="istap2"
            src="https://wp.sharkshopping.com/static/img/arrow-down.png"
            alt
            @click="tapImg1(2)"
          />
          <img v-else src="https://wp.sharkshopping.com/static/img/arrow-down2.png" alt />
        </span>
      </li>
      <li :class="{'active':currentEle=='筛选'}" @click="clickLi">
        筛选
        <span>
          <img
            v-if="istap3"
            src="https://wp.sharkshopping.com/static/img/arrow-down.png"
            alt
            @click="tapImg1(3)"
          />
          <img v-else src="https://wp.sharkshopping.com/static/img/arrow-down2.png" alt />
        </span>
      </li>
    </ul>
    <div>
      <ul>
        <li></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentEle: "综合",
      istap1: true,
      istap2: true,
      istap3: true
    };
  },
  methods: {
    clickLi(e) {
      // window.console.log(e);
      this.currentEle = e.target.innerText || e.srcElement.innerText;
      // window.console.log(e.target);
      // window.console.log(this.currentEle);
    },
    tapImg1(index) {
      // window.console.log(this.istap1);
      // 列表页数据价格旁升序降序图标点击图片切换，第二次点击，回到原来的状态，另一个图标图片切换
      window.console.log("点击")
      if(index==1){
        // window.console.log(this.istap1,"1");
         if (this.istap1 == false) {
           this.istap1 = true;
            this.istap2 = false;          
          } else {            
            this.istap1 = false;
            window.console.log(this.istap1,"1");
          }        
      }else if(index==2){
        
         if (this.istap2 == true) {
            this.istap2 = false;
          } else {
            window.console.log(this.istap2,"2");
            this.istap2 = true;
            this.istap1 = false;
          }
          
      }else{
        window.console.log(this.istap3,"3");
         if (this.istap3 == true) {
            this.istap3 = false;
          } else {
            this.istap3 = true;
          }
      }

  }
  },
  mounted() {
    // window.console.log(this.$route);
    this.clickLi;
  }
};
</script>
<style lang="scss" scoped>
.box {
  // background: greenyellow;
  .nav {
    display: flex;
    justify-content: space-around;
    // margin: .5rem 0;
    li {
      list-style: none;
      font-size: 0.875rem;
      line-height: 2.1875rem;
      position: relative;
      span {
        img {
          display: inline-block;
          width: 0.375rem;
          height: 0.1875rem;
          position: absolute;
        }
      }
    }
    li:nth-of-type(3) {
      span {
        img:nth-of-type(1) {
          top: 0.75rem;
          left: 2rem;
        }
        img:nth-of-type(2) {
          top: 1.25rem;
          left: 2rem;
        }
      }
    }
    li:nth-of-type(4) {
      span {
        img {
          top: 1rem;
          left: 2rem;
        }
      }
    }
    .active {
      color: #8909ac;
    }
  }
}
</style>